<!DOCTYPE HTML>
<html>
	<head>
  	<title>HTML5 GAME </title>
  		<script type="text/javascript" src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
		<script language="javascript" src="http://127.0.0.1:9009/socket.io/socket.io.js"></script>
		<script language="javascript" src="./js/common.js"></script>
		<script language="javascript">		
			var socket = io.connect('http://127.0.0.1:9009');

			var unitInfo = function (userId, unitCd, unitSeq, terms, flag) 	{
				this.USER_ID = userId;
				this.UNIT_CD = unitCd;
				this.UNIT_SEQ = unitSeq;
				this.TERMS = terms;
				this.FLAG = flag;
			};
			
// 			var socketNotice = function (msg) {
// 				socket.emit("msg", msg);
// 			};
			
			var fnGetRestTime = function (userId, target) {
				var curTm = $("#"+target).text();

				var unit = new unitInfo(userId, target, 0, 100, 'I');
				socket.emit('growBegin', unit);
		
				var restTm = "";
				if (curTm && curTm != "END")
				{
					var restSec = GfnGetTotalSec(curTm);
					if (restSec > 0)
					{
						restTm = GfnSec2Min(getTotalSec(curTm)-1);
					}
					else
					{
						restTm = "END";
						$("#"+target).css("border","1px #999 solid");
						var unit = new unitInfo('jade', target, 0, -1, 'E');
						//socket.emit('growBegin', unit);
						socket.emit('msg', '['+target+'] Completed!');
					}
					 $("#"+target).text(restTm);
				}
				
				if (curTm != "END")
				{
					setTimeout("fnGetRestTime('"+target+"')", 1000);
				}
				return;
			};			
			
			var fnGrowthBegin = function(userId, target, terms, seq, flag) {
				var unit = new unitInfo(userId, target, terms, seq, flag);
				socket.emit('growBegin', unit);
			};
			
			
					
			$(document).ready(function() {
				socket.emit("msg","The Line is connected.");
				
				socket.on('msg', function(data) {
				  $("#txtLog").append("<div>"+data+"</div>");
				});
				
				socket.on('rsMsg', function(data) {
				  $("#txtLog").append("<div>UNIT SEQ : "+data.UNIT_SEQ+"</div>");
				});
				socket.on('disconnected', function(data) {
						if (data == "true") socket.disconnect();
						  $("#txtLog").append("<div>Connection is Closed!!</div>");
						
					});

				fnGetRestTime('jade',10);
			});
		  </script>
		  <style>
		  	.tile { float:left; height:100px;width:100px;border:1px #999 solid; margin-left:5px; margin-bottom:5px; font-size:10pt; }
		  </style>
	</head>
	
	<body>
		<div style="width:330px; ">
		  <div id="10" class="tile">12:05:23</div>
		  <div id="20" class="tile" onclick="javascript:fnGetRestTime('jin','20');">01:00</div>
		  <div id="30" class="tile" onclick="javascript:fnGetRestTime('jade','30');">10</div>
		  <div id="50" class="tile">12:05:23</div>
		  <div id="60" class="tile" onclick="javascript:fnGetRestTime('hooshim','20');">01:00</div>
		  <div id="70" class="tile" onclick="javascript:fnGetRestTime('hooji','30');">10</div>
		</div>
		  <div>=== [LOG] ===</div>
		  <div id="txtLog"></div>
	</body>
</html>